import 'package:auto_route/auto_route.dart';
import 'package:convergence_media/gen/assets.gen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

@RoutePage()
class MessageScreen extends ConsumerWidget {
  const MessageScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return CustomScrollView(
      slivers: [
        const SliverToBoxAdapter(child: _TotalMessage()),
        SliverPadding(
          padding: EdgeInsets.only(
            left: 47.r,
            right: 40.r,
            top: 16.r,
          ),
          sliver: SliverList.separated(
            itemCount: 30,
            itemBuilder: (context, index) {
              return InkWell(
                onTap: () {},
                child: const _MessageScreenListItem(
                  noticationType: '活动通知',
                  time: '2023-08-01',
                  notificationTitle: '“小橙花”公益课堂开课啦',
                  isNotReaded: true,
                ),
              );
            },
            separatorBuilder: (BuildContext context, int index) {
              return Divider(
                indent: 60.r,
                height: 1,
              );
            },
          ),
        ),
        SliverFillRemaining(
          hasScrollBody: false,
          child: SizedBox(
            height: 96.r,
            child: TextButton(
              onPressed: () {},
              child: const Text('全部标记为已读'),
            ),
          ),
        ),
      ],
    );
  }
}

class _MessageScreenListItem extends StatelessWidget {
  const _MessageScreenListItem({
    required this.noticationType,
    required this.time,
    required this.notificationTitle,
    required this.isNotReaded,
  });

  final String noticationType;
  final String time;
  final String notificationTitle;
  final bool isNotReaded;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(
        vertical: 16.r,
      ),
      child: Row(
        children: [
          Container(
            width: 36.r,
            height: 36.r,
            padding: const EdgeInsets.all(10),
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color.fromRGBO(255, 97, 51, 1),
                  Color.fromRGBO(212, 48, 48, 1),
                ],
              ),
            ),
            child: Assets.images.mine.notice.image(
              width: 11.2.r,
              height: 16.8.r,
            ),
          ),
          SizedBox(
            width: 17.r,
          ),
          Expanded(
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      noticationType,
                      style: TextStyle(fontSize: 16.sp),
                    ),
                    Text(
                      time,
                      style: TextStyle(
                        color: const Color(0xffa6a6a6),
                        fontSize: 11.sp,
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  height: 4.r,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      notificationTitle,
                      style: TextStyle(
                        fontSize: 13.sp,
                        color: const Color(0xFF545454),
                      ),
                    ),
                    if (isNotReaded)
                      const Icon(
                        Icons.circle,
                        color: Colors.red,
                        size: 5,
                      ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _TotalMessage extends StatelessWidget {
  const _TotalMessage();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 98.r,
      child: Padding(
        padding: EdgeInsets.only(
          top: 17.r,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            _CircleTextDot(
              linearGradient: const LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color(0xFF2A82E4),
                  Color(0xFF185BA8),
                ],
              ),
              icon: Assets.images.mine.reply,
              text: '回复我的',
            ),
            _CircleTextDot(
              linearGradient: const LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color(0xFF43CF7C),
                  Color(0xFFA5D63F),
                ],
              ),
              icon: Assets.images.mine.at,
              text: '私信我的',
            ),
            _CircleTextDot(
              linearGradient: const LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color(0xFFffC300),
                  Color(0xFFff5733),
                ],
              ),
              icon: Assets.images.mine.like,
              text: '收获的赞',
            ),
          ],
        ),
      ),
    );
  }
}

class _CircleTextDot extends StatelessWidget {
  const _CircleTextDot({
    required this.linearGradient,
    required this.icon,
    required this.text,
  });

  final LinearGradient linearGradient;
  final AssetGenImage icon;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 45.r,
          height: 45.r,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            gradient: linearGradient,
          ),
          alignment: Alignment.center,
          child: icon.image(
            width: 24.r,
            height: 24.r,
          ),
        ),
        SizedBox(
          height: 9.r,
        ),
        Text(
          text,
          style: TextStyle(fontSize: 13.sp),
        ),
      ],
    );
  }
}
